<template>
      <div id="msg">
            <div class="container">
                  <div class="input-group">
                        <input type="text" v-model="formData.username" placeholder="姓名" class="info">
                        <input type="text" v-model.number="formData.telephone" placeholder="电话" class="info">
                  </div>
                  <div class="btn" @click="subForm">
                        立即咨询
                  </div>
            </div>
      </div>
</template>

<script>
      export default {
            data() {
                  return {
                        formData: {
                              username: "",
                              telephone: "",
                        }
                  }
            },
            methods: {
                  async subForm() {
                        let reg = /^1[356789]\d{9}$/gi
                        let { username, telephone } = this.formData
                        this.formData.key = this.$key
                        let isMatch = reg.test(telephone)
                        if (!username) {
                             this.$toast.fail("请输入姓名!") 
                             return false
                        } else if (!telephone) {
                              this.$toast.fail("请输入手机号!") 
                             return false
                        } else if (telephone && !isMatch) {
                               this.$toast.fail("手机号格式错误!") 
                               this.formData.telephone = ""
                             return false
                        } else {
                              let res = await this.$axios.post("/index/index/leave", this.formData)
                             // console.log(res);
                              let code = res.data.code
                              if (code ==202) {
                                    this.$toast.success("提交成功!")
                                    this.formData = {}
                              } else {
                                   this.$toast.fail("网络繁忙!")
                                    this.formData = {} 
                              }
                        }
                  } 
            },
      }
</script>

<style lang="scss" scoped>
#msg {
      width: 100%;
      max-width: 750px;
      margin: 0.2rem 0;
      .container {
            width: 100%;
            .input-group {
                  width: 100%;
                  .info {
                        display: block;
                        width: 100%;
                        margin: 0.2rem auto;
                        width: 5rem;
                        height: 0.8rem;
                        border-radius: 0.1rem;
                        outline: none;
                        text-shadow: none;
                        outline-color: transparent;
                        border: 1px solid #999999;
                        padding-left: 0.2rem;
                        font-size: 0.2rem;
                  }
            }
            .btn {
                  width: 2.3rem;
                  height: 0.8rem;
                  border-radius: 0.2rem;
                  font-size: 0.3rem;
                  background-color: #1c9ff2;
                  text-align: center;
                  line-height: 0.8rem;
                  color: #fff;
                  margin: 0.2rem auto;
            }
      }
}
</style>